<template>
  <el-form :model="sysColumn" :rules="rules" ref="sysColumn" label-width="120px">
    <div class="col-sm-12">
      <el-form-item label="编号" class="b-all" required>
        {{sysColumn.id}}
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="名称" prop="name" required>
        <el-input v-model="sysColumn.name" placeholder="请输入名称"></el-input>
      </el-form-item>
    </div>
    <div class="col-sm-5" id="sys-column-parent">
      <el-form-item label="上级栏目">
        <el-select v-if="type=='edit'" clearable v-model="sysColumn.column.id" style="width: 100%" :loading="ifSelectLoad" filterable placeholder="上级栏目">
          <el-option
            v-for="item in options"
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
        <div v-if="type=='add'">
          {{sysColumn.column.name}}
        </div>
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="类型" prop="types" required>
        <el-select v-model.number="sysColumn.types" style="width: 100%" filterable placeholder="选择类型">
          <el-option
            v-for='item in [{"key":0,"value":"服务","title":"服务"},{"key":1,"value":"管理","title":"管理"},{"key":2,"value":"内置","title":"内置"}]'
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
    </div>
    <div class="col-sm-5">
      <el-form-item label="级别" required>
        {{sysColumn.leveler}}
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="状态" required>
        <el-switch on-text="启用" off-text="禁用" v-model="sysColumn.state"></el-switch>
      </el-form-item>
    </div>
    <div class="col-sm-5">
      <el-form-item label="是否可用" required>
        <el-switch on-text="启用" off-text="禁用" v-model="sysColumn.unable"></el-switch>
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="快捷方式" required>
        <el-switch on-text="开启" off-text="关闭" v-model="sysColumn.ifShortcut"></el-switch>
      </el-form-item>
    </div>

    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="后台名称" prop="backName" required>
        <el-input v-model="sysColumn.backName" placeholder="请输入后台名称"></el-input>
      </el-form-item>
    </div>
    <div class="col-sm-5">
      <el-form-item label="后台排序" prop="backSorter" required>
        <el-input v-model.number="sysColumn.backSorter" placeholder="请输入后台排序[-99.99~99.99]"></el-input>
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="后台状态" required>
        <el-switch on-text="显示" off-text="隐藏" v-model="sysColumn.backHidden"></el-switch>
      </el-form-item>
    </div>
    <div class="col-sm-5">
      <el-form-item label="后台跳转方式" prop="backTarget" required>
        <el-select v-model.number="sysColumn.backTarget" style="width: 100%" filterable placeholder="请选择">
          <el-option
            v-for='item in [{"key":0,"value":"默认","title":"默认"},{"key":1,"value":"弹出","title":"弹出"}]'
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-10">
      <el-form-item label="后台路由" prop="backUrl" required>
        <el-input v-model="sysColumn.backUrl" placeholder="请输入后台路由"></el-input>
      </el-form-item>
    </div>

    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="前台名称" prop="beforeName" required>
        <el-input v-model="sysColumn.beforeName" placeholder="请输入前台名称"></el-input>
      </el-form-item>
    </div>
    <div class="col-sm-5">
      <el-form-item label="前台排序" prop="beforeSorter" required>
        <el-input v-model.number="sysColumn.beforeSorter" placeholder="请输入前台排序[-99.99~99.99]"></el-input>
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="前台状态" required>
        <el-switch on-text="显示" off-text="隐藏" v-model="sysColumn.beforeHidden"></el-switch>
      </el-form-item>
    </div>
    <div class="col-sm-5">
      <el-form-item label="后台跳转方式" prop="beforeTarget" required>
        <el-select v-model.number="sysColumn.beforeTarget" style="width: 100%" filterable placeholder="请选择">
          <el-option
            v-for='item in [{"key":0,"value":"默认","title":"默认"},{"key":1,"value":"弹出","title":"弹出"}]'
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-10">
      <el-form-item label="前台路由" prop="beforeUrl" required>
        <el-input v-model="sysColumn.beforeUrl" placeholder="请输入前台路由"></el-input>
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="图标Class">
        <el-input v-model="sysColumn.icoSmall" placeholder="请输入图标Class"></el-input>
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-5">
      <el-form-item label="创建人">
        {{sysColumn.creater}}
      </el-form-item>
    </div>
    <div class="col-sm-5">
      <el-form-item label="创建时间">
        {{sysColumn.creatTime}}
      </el-form-item>
    </div>
    <div class="line line-dashed line-xs pull-in"></div>
    <div class="col-sm-10">
      <el-form-item label="备注" prop="memo">
        <el-input type="textarea" v-model="sysColumn.memo" placeholder="请输入备注"></el-input>
      </el-form-item>
    </div>
    <div style="clear: both"></div>
    <footer class="panel-footer text-right bg-light lter">
      <div style="float: left;">
        <span class="badge bg-danger text-base textTs"></span>
      </div>
      <el-button v-auth="'VColumn:tab:edit'" v-if="type=='edit'" type="primary" :loading="ifSub" @click="editSubmit()">提交修改</el-button>
      <el-button v-auth="'VColumn:tab:add'" v-if="type=='add'" type="primary" :loading="ifSub" @click="addSubmit()">确认添加</el-button>
    </footer>
    <div style="display: none">{{columnValue}}</div>
    <div style="display: none">{{columnValue_}}</div>
  </el-form>
</template>
<script>

  import Vue from 'vue'
  import {SERVICE_URLS} from '../../../../config/service.url'
  import {columnVo} from '../../../vo/sysColumn'
  import {updateColumnChoose} from './update.choose'

  export default{
    props: ["type"],
    data(){
      return {
        ifSub: false,
        ifSelectLoad: true,
        options: [],
        sysColumn: columnVo(),
        rules: {
          name: [
            {required: true, message: '请输入栏目名称', triggers: ['blur', 'change']},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', triggers: ['blur', 'change']}
          ],
          backName: [
            {required: true, message: '请输入后台名称', triggers: ['blur', 'change']},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', triggers: ['blur', 'change']}
          ],
          backSorter: [
            {type: 'number', message: '后台排序必须为数字', triggers: ['blur', 'change']},
            {type: 'number', min: -99.99, max: 99.99, message: '大小必须在 -99.99 至 99.99 之间', triggers: ['blur', 'change']}
          ],
          backUrl: [
            {required: true, message: '后台路由不能为空', triggers: ['blur', 'change']},
            {min: 1, max: 200, message: '长度在 1 至 200 之间', triggers: ['blur', 'change']}
          ],
          beforeSorter: [
            {type: 'number', message: '前台排序必须为数字', triggers: ['blur', 'change']},
            {type: 'number', min: -99.99, max: 99.99, message: '大小必须在 -99.99 至 99.99 之间', triggers: ['blur', 'change']}
          ],
          beforeUrl: [
            {required: true, message: '前台路由不能为空', triggers: ['blur', 'change']},
            {min: 1, max: 200, message: '长度在 1 至 200 之间', triggers: ['blur', 'change']}
          ],
          beforeName: [
            {required: true, message: '请输入前台名称', triggers: ['blur', 'change']},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', triggers: ['blur', 'change']}
          ],
          types: [{type: 'integer', required: true, message: '请选择类型', triggers: ['blur', 'change']}],
          backTarget: [{type: 'integer', required: true, message: '请选择后台跳转方式', triggers: ['blur', 'change']}],
          beforeTarget: [{type: 'integer', required: true, message: '请选择前台跳转方式', triggers: ['blur', 'change']}],
          memo: [
            {min: 0, max: 255, message: '长度在 0 到 255 个字符', triggers: ['blur', 'change']}
          ]
        }
      }
    },
    computed: {
      columnValue(){
        if (this.type === "edit") {
          if (this.$store.state['sysColumn']) {
            this.init(this.sysColumn, this.$store.state['sysColumn'], 'tree');
          }
        }
        return this.$store.state.columnModule.editState;
      },
      columnValue_(){
        if (this.type === "add") {
          this.openInit(this.sysColumn, this.$store.state['sysColumn']);
        }
        return this.$store.state.columnModule.addState;
      }
    },
    methods: {
      init(oneNode, treeNode, type){
        if (type == 'tree') {
          oneNode['id'] = treeNode.id;
        }
        oneNode['name'] = treeNode.name;
        oneNode['types'] = treeNode.types;
        oneNode['leveler'] = treeNode.leveler;
        oneNode['backName'] = treeNode.backName;
        oneNode['backUrl'] = treeNode.backUrl;
        oneNode['backSorter'] = treeNode.backSorter;
        oneNode['backHidden'] = treeNode.backHidden;
        oneNode['backTarget'] = treeNode.backTarget;
        oneNode['beforeName'] = treeNode.beforeName;
        oneNode['beforeUrl'] = treeNode.beforeUrl;
        oneNode['beforeSorter'] = treeNode.beforeSorter;
        oneNode['unable'] = treeNode.unable;
        oneNode['beforeHidden'] = treeNode.beforeHidden;
        oneNode['beforeTarget'] = treeNode.beforeTarget;
        oneNode['state'] = treeNode.state;
        oneNode['ifShortcut'] = treeNode.ifShortcut;
        oneNode['icoSmall'] = treeNode.icoSmall;
        oneNode['icoBig'] = treeNode.icoBig;
        oneNode['creater'] = treeNode.creater;
        oneNode['creatTime'] = treeNode.creatTime;
        oneNode['memo'] = treeNode.memo;
        oneNode['reservation'] = treeNode.reservation;
        //初始化上级栏目选择数据
        const self = this;
        Vue.submit(self, {
          url: SERVICE_URLS.column.select,
          data: {id: treeNode.id},
          noTips: true,
          loading: 'ifSelectLoad',
          callback: function (data) {
            if (type === 'tree') {
              self.options = data.body;
              if (treeNode.pId != "begin") {
                self.sysColumn.column['id'] = treeNode.pId;
              } else {
                self.sysColumn.column['id'] = "";
              }
            }
          }
        }, Vue)
      },
      openInit(oneNode, treeNode){
        const sysColumnParentName = this.$store.state['sysColumnParentName'];
        if (sysColumnParentName.addType === "same") {
          if (treeNode.pId != "begin") {
            oneNode.column['id'] = treeNode.pId;
          } else {
            oneNode.column['id'] = "";
          }
          oneNode.column['name'] = sysColumnParentName.parentName;
          oneNode['leveler'] = treeNode.leveler;
        } else {
          oneNode.column['id'] = treeNode.id;
          oneNode['leveler'] = treeNode.leveler + 1;
          oneNode.column['name'] = treeNode.name;
        }
      },
      editSubmit(){
        const self = this;
        Vue.submit(self, {
          formName: 'sysColumn',
          url: SERVICE_URLS.column.update,
          data: self.sysColumn,
          params: {
            id: self.sysColumn.id
          },
          callback: function (data) {
            self.sysColumn['leveler'] = data.body.leveler;
            const treeObj = self.$store.state['treeObj'];
            let selectNode = treeObj.getSelectedNodes()[0];//获取选择的节点
            //重置一下tree中节点数据
            self.init(selectNode, data.body, "update");
            treeObj.updateNode(selectNode);
            //获取修改后节点的父节点Id
            let pId = data.body.pId;
            //判断当前节点的层级关系是否有改变(子父节点关系)
            if (selectNode.pId == pId || (selectNode.pId == null && pId == "begin")) {
              return;
            }
            //移动节点
            let allNodes, i = 0;
            if (pId == "begin") { //修改为顶级节点
              allNodes = treeObj.getNodes();
              for (i = 0; i < allNodes.length; i++) {  //判断节点需要移动到的位置
                if (allNodes[i].backSorter > data.body.backSorter) { //在此节点前插入修改的节点.
                  treeObj.moveNode(allNodes[i], selectNode, "prev");
                  break;
                }
                if (i == allNodes.length - 1) { //如果最后一个
                  treeObj.moveNode(allNodes[i], selectNode, "next");
                }
              }
            } else {
              allNodes = treeObj.getNodesByParam("pId", pId);
              if (allNodes.length == 0) { //当前节点下没有子节点
                //获取父节点
                let node = treeObj.getNodeByParam("id", pId);
                treeObj.moveNode(node, selectNode, "inner");
              } else {
                for (i = 0; i < allNodes.length; i++) {  //判断节点需要移动到的位置
                  if (allNodes[i].backSorter > data.body.backSorter) { //在此节点前插入修改的节点.
                    treeObj.moveNode(allNodes[i], selectNode, "prev");
                    break;
                  }
                  if (i == allNodes.length - 1) { //如果最后一个
                    treeObj.moveNode(allNodes[i], selectNode, "next");
                  }
                }
              }
            }
          }
        }, Vue);
      },
      addSubmit(){
        const self = this;
        Vue.submit(self, {
          formName: 'sysColumn',
          url: SERVICE_URLS.column.create,
          data: self.sysColumn,
          callback: function (data) {
            self.sysColumn['leveler'] = data.body.leveler;
            const treeObj = self.$store.state['treeObj'];
            //判断添加的同级还是下级
            //获取树的当前选中节点
            const selectNode = treeObj.getSelectedNodes()[0];
            let treeNode, i = 0, one;
            if (data.body.pId === selectNode.id) { //下级关系
              if (selectNode.children == undefined || selectNode.children.length == 0) {
                treeNode = treeObj.addNodes(selectNode, i, data.body);
              } else {
                for (i = 0; i < selectNode.children.length; i++) {
                  one = selectNode.children[i];
                  if (one.backSorter > data.body.backSorter) {
                    treeNode = treeObj.addNodes(selectNode, i, data.body);
                    break;
                  }
                  if (i == selectNode.children.length - 1) {
                    i++;
                    treeNode = treeObj.addNodes(selectNode, i, data.body);
                  }
                }
              }

            } else { //同级关系
              //获取所有同级节点
              let allNode;
              if (selectNode.pId == null) {
                allNode = treeObj.getNodes();
              } else {
                allNode = treeObj.getNodesByParam("pId", selectNode.pId, selectNode.getParentNode());
              }
              if (allNode.length == 0) {
                treeNode = treeObj.addNodes(selectNode.getParentNode(), i, data.body);
              } else {
                for (i = 0; i < allNode.length; i++) {
                  one = allNode[i];
                  if (one.backSorter > data.body.backSorter) {
                    treeNode = treeObj.addNodes(selectNode.getParentNode(), i, data.body);
                    break;
                  }
                  if (i == allNode.length - 1) {
                    i++;
                    treeNode = treeObj.addNodes(selectNode.getParentNode(), i, data.body);
                  }
                }
              }
            }
            treeObj.selectNode(treeNode[0]); //添加节点,并选中节点
            //设置数据为当前添加节点
            updateColumnChoose(self, treeNode[0]);
            self.$store.state.columnModule.addDialogRef.close();
            //清空数据
            self.$refs['sysColumn'].resetFields();
          }
        }, Vue);
      }
    }
  }
</script>
